#@ApiDocMainLayout()
#define main()
<div class="form-horizontal" >
	<div class="form-group" style="display:block">
	        <div class="col-sm-2">
		        <select id="type" class="form-control">
				    <option value="Get">Get</option>
				    <option value="Post">Post</option>
				</select>
	        </div>
			<div class="col-sm-6">
				<input type="text" id="url" name="url" value="" placeholder="请求地址" class="form-control"/>
			</div>
			<div class="col-sm-2">
				<button type="button" id="sendRequest"  class="btn btn-block btn-primary">发送请求</button>
			</div>
	</div>
	<div class="form-group" style="display:block">
	   <div class="col-xs-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">请求参数</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body" id="requestbody">
              <table class="table table-bordered" id="requestParams">
                <tbody id="tbody">
              	</tbody>
              </table>
              <textarea  id="jsonParam"  class="form-control" style="background-color:#f5f5f5;" rows="5"></textarea>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix">
              <div class="col-xs-2" style="margin-top:5px;">
             	<button type="button"  id="addkvId"  value="" onclick="addkv()" class="btn btn-block btn-info pull-left">发送键值对参数</button>
              </div>
            </div>
           </div>
          <!-- /.box -->
        </div>
	</div>
	<div class="form-group" style="display:block">
	   <div class="col-xs-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-titl8e">请求Header</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered" id="requestHeader">
                <tbody>
	                <tr>
	                  <th style="width:150px">Header名称</th>
	                  <th style="width:500px">Header值</th>
	                  <th>操作</th>
	                </tr>
	                <tr>
	                  <td><input type="text"  id="headername"   name="" value="" placeholder="Header名称" class="form-control"/></td>
	                   <td><input type="text" id="headervalue"  name="" value="" placeholder="Header值" class="form-control"/></td>
	                  <td>
	                    <button type="button" style="width:100px;" onclick="delHeader(this)" class="delete btn btn-block btn-danger pull-left">删除</button>
	                  </td>
	                </tr>
              	</tbody>
              </table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix">
              <div class="col-xs-2">
             	<button type="button" id="addheader"  class="btn btn-block btn-success pull-right">添加参数</button>
              </div>
            </div>
           </div>
          <!-- /.box -->
        </div>
	</div>
	<div class="form-group" style="display:block">
	   <div class="col-xs-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">返回结果</h3>
            </div>
            <!-- /.box-header -->
            <pre id="json-renderer"></pre>
           </div>
          <!-- /.box -->
        </div>
	</div>
</div>
<script type="text/javascript">
var contentType = "application/json";
var dataEncoder = 1;
var  header={};
var action = #(action);
var params =action.paramsIn;
var paramsOut = action.paramsOut;
var djson = new StringBuffer();
$(function(){
    //路径 
   $("#url").val(action.actionKey);
    //请求方式
   $("#type").val(action.requestMethod);
   paramsOut = paramsOut.replace(/'/g, '"');
    //返回结果说明
   if(paramsOut){
	  paramsOut = JSON.parse(paramsOut);
   }
   //header添加token信息
    $("#headername").val("token");$("#headervalue").val(localStorage.getItem("token"));
   $('#json-renderer').jsonViewer(paramsOut,{collapsed: false, withQuotes: false, withLinks: false});
   //首次添加json下的参数说明dataEncoder=1
   addparams(params.paramModel,dataEncoder);
   //增加header参数
   $("#addheader").click(function(){
       $("#requestHeader tbody").append('<tr><td><input type="text" name="" value="" placeholder="Header名称" class="form-control"/></td><td><input type="text"  name="" value="" placeholder="Header值" class="form-control"/></td><td><button type="button" style="width:100px;" onclick="delHeader(this)" class="btn btn-block btn-danger pull-left">删除</button></td></tr>');
   })
    //发送请求
	$("#sendRequest").click(function(){
  		//获取header
		header={};
		var headernum = $("#requestHeader tbody > tr").length-1;
		for(var i =0 ; i < headernum;i++){
			var headername = $("#headername").val();
			var headervalue = $("#headervalue").val();
			 header[headername] = headervalue;
		} 
		//请求方式
		var  type =$("#type").val();
		//请求路径
		var  url= $("#url").val();
		//获取请求参数
		var params;
		if(dataEncoder==1){//json格式
			params = $("#jsonParam").val();
		}else if(dataEncoder==2){//kv格式
			contentType ='application/x-www-form-urlencoded';
			params=[];
			var paramnum = $("#requestParams tbody > tr").length-1;
			for(var i =0 ; i < paramnum;i++){
				var paramname = $("#paramname"+i).val();
				var paramvalue = $("#paramvalue"+i).val();
				var param = {};
				param.name = paramname;param.value = paramvalue;
				params.push(param);
			}
		}
		//使用$.ajax()发送异步请求
		$.ajax({
			    url: url,// 请求路径
			    contentType:contentType,
			    dataType:"json",   //返回格式为json
			    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			   	data:params, //参数值
			    type:type,   //请求方式
			    headers:header,
			    beforeSend:function(data){
			        //请求前的处理
			    },
			    success:function(data){
			        //请求成功时处理
			        $('#json-renderer').jsonViewer(data,{collapsed: false, withQuotes: false, withLinks: false});
			    },
			    complete:function(data){
			        //请求完成的处理
			    },
			    error:function(data){
			        //请求出错处理
			    }
			});
	});
});

function addparams(params,dataEncoder){
	if(dataEncoder==1){//json
		djson.clear();
		djson.append("{\n");
		$("#tbody").append('<tr><th style="width:200px">参数名</th><th style="width:200px">参数说明</th><th style="width:200px">长度限制</th><th style="width:100px">操作</th></tr>');
		for(var i=0;i<params.length;i++){
			addJsonkv(params[i],i);
		} 
		djson.append("}");
		$("#jsonParam").val(djson.toString());
	}else if(dataEncoder==2){//kv
		$("#tbody").append('<tr><th style="width:300px">参数名</th><th style="width:300px">参数值</th><th style="width:300px">参数说明</th><th style="width:300px">长度限制</th><th style="width:100px">操作</th></tr>');
		for(var i=0;i<params.length;i++){
			addFormkv(params[i],i);
		 } 
	}   
}	
function addFormkv(param,i){
	   $("#tbody").append('<tr><td><input id="paramname'+i+'" type="text"  name="paramname" value="'+param.name+'" placeholder="参数名称" class="form-control"/></td><td><input id="paramvalue'+i+'" type="text"  name="paramvalue" value="" placeholder="参数值" class="form-control"/></td><td>'+param.des+'</td> <td>'+param.length+'</td><td><button type="button" onclick="delParam(this)" class="btn btn-block btn-danger pull-right">删除</button></td></tr>');   
}
function addJsonkv(param,i){
	   $("#tbody").append('<tr><td>'+param.name+'</td><td>'+param.des+'</td> <td>'+param.length+'</td><td><button type="button" onclick="delParam(this)" class="btn btn-block btn-danger pull-right">删除</button></td></tr>');   
	   djson.append("\"");
	   djson.append(param.name);
	   djson.append("\"");
	   djson.append(":");
	   djson.append("\"");
	   djson.append("	");
	   djson.append("\"");
	   djson.append(",");
	   djson.append("\n");
}
//添加键值对参数
function addkv(){                                    
    if(dataEncoder==1){//json
    	dataEncoder = 2;
    	$("#addkvId").html('返回json格式');
    	$("#tbody").empty();
    	$("#jsonParam").remove();
    	addparams(params.paramModel,dataEncoder);
    	
    }else if(dataEncoder==2){//kv
    	dataEncoder=1;
    	$("#addkvId").html('返回键值对参数');
  		$("#tbody").empty();
  		$("#jsonParam").remove();
  		addparams(params.paramModel,dataEncoder);
  		$("#requestbody").append("<textarea  id=\"jsonParam\" style=\"background-color:#f5f5f5;\" class=\"form-control\" rows=\"5\"></textarea>");
    }
}														
function delParam(that){
	  $(that).parent().parent().remove(); 
}

function delHeader(that){
	  $(that).parent().parent().remove(); 
}
</script>
<style>
.form-control {
  border-radius: 4px;
}

</style>
#end